<template>
	<view class="rewardPacket">
		<view class="main">
			<view class="header" @click="transfer">
				<view class="left">
					<view class="left_icon">
						<i class='iconfont'>&#xe644;</i>
					</view>
					<view class="word">票据	<text class="gray">（提供增值税普票抵扣转账保证金）</text></view>
				</view>
				<view class="icon">
					<uni-icon type="arrowright" size="20"></uni-icon>
				</view>		
			</view>
			<view class="middle">
				<text class="word">输入金额(元)</text>
				<view class="inputWrap">
					<view class="input"><text>￥</text><input class="uni-input" type="number" v-model="money" @input='onChange' placeholder='最低转账金额100元' placeholder-style="font-weight:400;color:#cccccc;font-size:28upx;" placeholder-class="phStyle"></view>
					<view class="max" @tap="maxMoney">
						最大
					</view>
				</view>
				
			</view>
			<view class="middle transfer">
				<view class="left">
					<text>转出方</text>
					<text>奖励金（{{balance}}元）</text>
				</view>
				
				<view class="center">
					<i class='iconfont'>&#xe606;</i>
				</view>
				<view class="left right">
					<text>转入方</text>
					<text>电子钱包</text>
				</view>
				
			</view>
			<view class="footer">
				<view class="withdraw_btn" :class="{activeBj:changeBJ}" @click="transferMoney">转账</view>
				<text class="tip">奖励金转到电子钱包需收取{{serviceCharge}}发票保证金，您可以提供等额增值税普票进行抵扣</text>
			</view>
			
		</view>
	
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
export default {
	data() {
		return {
			withdrawMaxMoney: 10,
			money: '',
			name: '',
			balance: 0,
			serviceCharge: 0,
			lastNum: '',
			showTrueMoney: false,
			changeBJ: false,
			isUsedBank: false,
			authStatusValue: '',
			authTime: ''
		};
	},

	computed: {},
	onLoad(e) {
		this.globalRuleGet();
		this.userSurplus();
	},
	methods: {
		userSurplus() {
			util.ajax(
				'userSurplus',
				{
					wealthType: 'reward',
					token: util.getUserToken()
				},
				data => {
					let json = data.data;
					if (json.status) {
						console.log(json.data);
						this.balance = util.showDecimal(json.data)
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},

				(data, code) => {
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		},
		transfer() {
			uni.navigateTo({
				url: './transferRecord'
			});
		},
		globalRuleGet() {
			util.ajax(
				'globalRuleGet',
				{
					token: util.getUserToken()
				},
				data => {
					let json = data.data;
					if (json.status) {
						console.log(json.data.rule.proportionOfReward2Money);

						this.serviceCharge =
							json.data.rule.proportionOfReward2Money > 0
								? json.data.rule.proportionOfReward2Money * 100 + '%'
								: 0;
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		},
		maxMoney() {
			this.money = this.balance;
		},
		onChange(e) {
			let value = +e.detail.value || 0;
			if (value >= 100) {
				this.changeBJ = true;
			} else {
				this.changeBJ = false;
			}
			
			if (+this.balance < value) {
				// value = this.balance;
				uni.showToast({
					title: '已超出奖励金余额',
					icon: 'none',
					duration: 1000
				});
			}
			this.money = value || '';
		},
		getUserInfo() {
			util.ajax(
				'userDetail',
				{
					token: util.getUserToken()
				},
				data => {
					let json = data.data;
					if (json.status) {
						// console.log(json)
						this.authTime = json.data.authTime;
						this.name = json.data.name;
						this.balance = util.showDecimal(json.data.surplus);
						this.authStatusValue = json.data.authStatus.value;
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					// console.log(data);
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		},
		authStatus(content) {
			uni.showModal({
				title: '温馨提示',
				content: content,
				cancelText: '去认证',
				cancelColor: '#cccccc',
				confirmText: '再看看',
				confirmColor: '#fff',
				success: res => {
					if (res.confirm) {
					} else if (res.cancel) {
						if (this.authStatusValue === 'checking') {
							uni.navigateTo({
								url: '../toCertification3'
							});
						} else {
							uni.navigateTo({
								url: '../toCertification'
							});
						}
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		transferMoney() {
			console.log(this.money)
			if (!this.money) {
				uni.showToast({
					title: '请输入金额！',
					icon: 'none',
					duration: 1000
				});
				return;
			}
			if (this.money > this.balance) {
				uni.showToast({
					title: `已超出奖励金余额！`,
					icon: 'none',
					duration: 1000
				});
				return;
			}
			if (this.money < 100) {
				uni.showToast({
					title: `最低转账100元！`,
					icon: 'none',
					duration: 1000
				});
				return;
			}
			
			uni.showLoading({
				title: '正在转账...'
			});
			util.ajax(
				'userReward2Money',
				{
					money: this.money * 100,
					token: util.getUserToken()
				},
				data => {
					uni.hideLoading();
					let json = data.data;
					if (json.status) {
						uni.showToast({
							title: '转账成功',
							icon: 'none',
							duration: 600
						});
						this.changeBJ = false
						this.balance  = this.balance - this.money
						this.money = ''
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					console.log(data);
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		}
	},
	components: {
		uniIcon
	}
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
page {
	background: rgb(240, 239, 244);
}
.phStyle {
	font-size: 28upx;
}
// view{
// 	line-height: 1.8;
// }
uni-radio .uni-radio-input {
	width: 20upx;
	height: 20upx;
	line-height: 20upx;
}

.rewardPacket {
	flex: 1;
	flex-direction: column;
	width: 100%;
	height: auto;
	.main {
		flex-direction: column;
		// padding: 30upx;
		.header {
			margin: 30upx;
			background: white;
			box-sizing: border-box;
			margin-bottom: 30upx;
			align-items: center;
			height: 110upx;
			justify-content: space-between;
			.left {
				font-size: 30upx;
				padding-left: 20upx;
				.left_icon {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					background: rgb(249, 110, 14);
					color: white;
					align-items: center;
					justify-content: center;
					margin-right: 20upx;
					i {
						font-size: 40upx;
					}
				}
				.word {
					line-height: 1.15;
					align-items: center;
					.gray{
						color: #CCCCCC;
					}
				}
			}
		}
		.middle {
			padding: 30upx 30upx 0;
			box-sizing: border-box;
			flex-direction: column;
			background: white;
			margin-bottom: 30upx;
			.word {
				font-size: 28upx;
				color: rgb(51, 51, 51);
			}
			.inputWrap {
				justify-content: space-between;
				position: relative;
				.input {
					width: 80%;
					align-items: center;
					margin-top: 40upx;
					text {
						font-size: 46upx;
						color: #333333;
						font-weight: 600;
					}
					input {
						font-size: 42upx;
						color: #333333;
						font-weight: 600;
						padding-left: 20upx;
					}
				}
				.max {
					position: absolute;
					right: 0;
					top: 50upx;
					background: #ff1268;
					color: white;
					padding: 8upx 16upx 9upx;
					line-height: 1;
					border-radius: 5upx;
					margin-right: 10upx;
				}
			}
		}
		.transfer {
			padding: 30upx 0;
			box-sizing: border-box;
			flex-direction: row;
			.left {
				width: 45%;
				padding-left: 30upx;
				box-sizing: border-box;
				flex-direction: column;
				text{
					font-size: 26upx;
				}
				text:first-child {
					margin-bottom: 15upx;
					color: #777777;
				}
			}
			.center {
				width: 10%;
				justify-content: center;
				align-items: center;
				color: #ff1268;
				transform: rotate(180deg);
				i {
					font-size: 70upx;
					font-weight: 600;
				}
			}
			.right {
				padding-right: 30upx;
				justify-content: flex-end;
				text {
					text-align: right;
				}
			}
		}
		.footer {
			// background: white;
			padding: 10upx 50upx 56upx;
			box-sizing: border-box;
			flex-direction: column;
			width: 100%;
			.tip {
				font-size: 22upx;
				color: #666666;
				line-height: 1.5;
				margin-top: 20upx;
			}

			.withdraw_btn {
				background: #ff1268;
				color: white;
				font-size: 34upx;
				width: 100%;
				height: 100upx;
				justify-content: center;
				align-items: center;
				border-radius: 5upx;
				margin: 42upx auto 0;
				background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
				background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
				background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
				background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
				background: linear-gradient(to right, #fabde6, #ffa0c2);
			}
			.activeBj {
				background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
				background: -o-linear-gradient(to right, #ff48ac, #ff1268);
				background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
				background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
				background: linear-gradient(to right, #ff48ac, #ff1268);
				color: white;
			}
		}
	}
	.chooseBank {
		width: 100%;
		// background: transparent;
		position: fixed;
		bottom: 0;
		.chooseBankWrap {
			background: white;
			margin: 0 auto;
			width: 100%;
			flex-direction: column;
			.title {
				position: relative;
				justify-content: center;
				align-items: center;
				height: 100upx;
				border-bottom: 1upx solid #eeeeee;
				.closeWrap {
					// border: 1upx solid red;
					padding: 10upx;
					position: absolute;
					left: 20upx;
				}
				.close {
				}

				text {
					font-size: 30upx;
				}
			}
		}
		.list {
			flex-direction: column;
			.radioGroup {
				width: 100%;
				.radio {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					height: 100upx;
					border-bottom: 1upx solid #eeeeee;
					padding: 0 30upx;
				}
				.gray {
					color: #cccccc;
					padding-left: 100upx;
				}
				.icon {
					width: 100upx;
					justify-content: flex-end;
				}
			}
		}
		.bank_footer {
			height: 200upx;
			flex-direction: column;

			text {
				font-size: 28upx;
				padding: 20upx 100upx;
				line-height: 1.8;
			}
		}
	}
}
</style>
